<template>
    <el-form :inline="true" :model="PageInput" class="demo-form-inline">
        <el-form-item label="用户姓名">
      <el-input v-model="PageInput.userName" placeholder="请输入用户姓名" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="用户电话">
      <el-input v-model="PageInput.userPhone" placeholder="请输入用户电话" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="提交时间">
      <el-date-picker
        v-model="PageInput.startTime"
        type="date"
        placeholder="请选择开始时间"
        clearable
        width="150px"
      />
      ——
      <el-date-picker
        v-model="PageInput.endTime"
        type="date"
        placeholder="请选择结束时间"
        clearable
        width="150px"
      />
    </el-form-item>
    <el-button type="primary" @click="show()">查询</el-button>
    <el-button @click="handleExport">导出</el-button>
    </el-form>
  <el-table :data="tableData">
    <el-table-column prop="id" label="编号"/>
    <el-table-column prop="userName" label="用户姓名"/>
    <el-table-column prop="date" label="用户类型" #default="s">
    {{ ["业主", "租户", "快递", "业主家属", "物业人员", "公司"][s.row.occType-1] }}
    </el-table-column>
    <el-table-column prop="userPhone" label="手机号"/>
    <el-table-column prop="date" label="性别" #default="s">
    <span v-if="s.row.userGender==0">男</span>
    <span v-else>女</span>
    </el-table-column>
    <el-table-column prop="date" label="身份证号" #default="s">
    {{ s.row.userNo.substring(0,6)+"****" }}
    </el-table-column>
    <el-table-column prop="date" label="提交时间" #default="s">
    {{ moment(s.row.userTime).format("YYYYMMDD HH:mm:ss") }}
    </el-table-column>
    <el-table-column prop="date" label="状态" #default="s">
    <span style="color:red">{{ ["待审核","已审核","已驳回"][s.row.userStatus] }}</span>
    </el-table-column>
    <el-table-column prop="date" label="操作" #default="s">
        <el-button type="primary" @click="GetById(s.row.id)">查看详情</el-button>
    </el-table-column>
  </el-table>
<el-pagination
      v-model:current-page="PageInput.pageIndex"
      v-model:page-size="PageInput.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
<el-dialog v-model="dis.updateStatus" title="用户信息">
    <el-form :model="getUserById">
      <el-form-item label="编号" >
        <span>{{ getUserById.id }}</span>
      </el-form-item>
      <el-form-item label="用户姓名" >
        <span>{{ getUserById.userName }}</span>
      </el-form-item>
      <el-form-item label="用户类型" >
        <span>{{ ["业主", "租户", "快递", "业主家属", "物业人员", "公司"][getUserById.occType-1] }}</span>
      </el-form-item>
      <el-form-item label="用户电话" >
        <span>{{ getUserById.userPhone }}</span>
      </el-form-item>
      <el-form-item label="性别" >
        <span>{{ getUserById.userGender==false?"男":"女" }}</span>
      </el-form-item>
      <el-form-item label="身份证号" >
        <span>{{ getUserById.userNo }}</span>
      </el-form-item>
      <el-form-item label="状态" >
        <span style="color:green">{{ ["待审核","已审核","已驳回"][getUserById.userStatus] }}</span>
      </el-form-item>
      <el-form-item label="有效期限" >
        <span>{{ getUserById.extionTime }}</span>
      </el-form-item>
      <el-form-item label="提交时间" >
        <span style="color: red;">{{ moment(getUserById.userTime).format("YYYYMMDD HH:mm:ss") }}</span>
      </el-form-item>
    </el-form>
  </el-dialog>



</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import userManageMent from '/@/api/UserManage/occupantAudit'
import moment from 'moment';
import { ElMessage, type ComponentSize } from 'element-plus'
const dis = reactive(
    {
        updateStatus: false,
    }
)

const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)
const tableData = ref()
const getUserById = reactive(
    {
        "id": 0,
        "userName": "",
        "occType": 0,
        "userPhone": "",
        "userGender": false,
        "userNo": "",
        "userTime": "",
        "userStatus": 0,
        "extionTime": ""
    }
)
const PageInput = reactive(
    {
        "userName": "",
        "userPhone": "",
        "startTime": "",
        "endTime": "",
        "pageIndex": 1,
        "pageSize": 10,
        userStatus:1
    }
)
var total = 0;
const show = () => {
    userManageMent.pageGetUserManage(PageInput).then(res => {
        console.log(res)
        tableData.value = res.data.result.items
        total=res.data.result.total
    })
        .catch(err => {
        console.log(err)
    })
}
const GetById = (id: number) => {
    dis.updateStatus = true
    userManageMent.getUserById(id)
        .then(res => {
        getUserById.id = res.data.result.data.id
        getUserById.userName = res.data.result.data.userName
        getUserById.occType = res.data.result.data.occType
        getUserById.userPhone = res.data.result.data.userPhone
        getUserById.userGender = res.data.result.data.userGender
        getUserById.userNo = res.data.result.data.userNo
        getUserById.userTime = res.data.result.data.userTime
        getUserById.userStatus = res.data.result.data.userStatus
        getUserById.extionTime = res.data.result.data.extionTime
        })
        .catch(err => {
        console.log(err)
    })
}
const updateStatus = reactive(
    {
        id: 0,
        status:0
    }
)
const updateUserStatus = (status:number) => {
    updateStatus.id = getUserById.id
    updateStatus.status = status
    userManageMent.updateUserStatus(updateStatus)
        .then(res => {
            if (res.data.result.code == 200)
            {
                ElMessage.success(res.data.result.msg)
                dis.updateStatus = false
            show()
        }
        show()
    })
        .catch(err => {
        console.log(err)
    })
}

onMounted(() => {
    show()
})
const handleSizeChange = (val: number) => {
    PageInput.pageSize = val;
    show()
}
const handleCurrentChange = (val: number) => {
    PageInput.pageIndex = val;
    show()
}
const handleExport = async () => {
    try {
        const res = await userManageMent.getUserExcel(PageInput);
        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        const link = document.createElement('a');
        link.setAttribute('href', URL.createObjectURL(blob));
        link.setAttribute('download', '用户名单.xlsx');
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(link.href);
    } catch (error) {
        console.error('Error in handleExport:', error);
        // 可以在这里添加代码显示一个错误提示框给用户，比如使用 alert 或者其他UI组件库提供的提示方式
        alert('导出住户名单时出现错误，请稍后再试。');
    }
};
</script>